<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      destroy-on-close
      draggable
      @open="handleOpen"
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>变更记录</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <ProjectInfo :projectId="projectId" />
      <div class="bg-white my-[10px]">
        <BaseHead style="border-bottom: 0">变更记录</BaseHead>
        <el-table :data="tableData" class="w-full" border stripe>
          <el-table-column prop="alterTypeName" label="变更类型" />
          <el-table-column prop="alterDate" label="变更时间" />
          <el-table-column prop="projectName" label="项目名称" />
          <el-table-column prop="alterReason" label="变更原因" />
          <el-table-column label="审核状态">
            <template #default="{ row }">
              <CommonLabel
                :dataList="checkStatusList.value"
                valueKey="dictValue"
                labelKey="dictLabel"
                :value="row.checkstatus"
              />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="150" align="center">
            <template #default="{ row }">
              <template v-if="[-1, 3].includes(Number(row.checkstatus))">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  @click="handleEdit(row.id, row.projectId, row.taskId, row.isAuditor)"
                  >编辑</el-button
                >
                <el-button type="danger" size="small" plain @click="handleDel(row.id)"
                  >删除</el-button
                >
              </template>
              <el-button
                type="primary"
                size="small"
                plain
                @click="handleView(row.id)"
                v-if="Number(row.checkstatus) == 2"
              >
                查看
              </el-button>
              <el-button
                type="warning"
                size="small"
                plain
                @click="handleCancel(row.processInstanceId, row.id)"
                v-if="Number(row.checkstatus) == 1"
                :loading="cancelLoading && cancelId == row.id"
                >撤销</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
  <EditZxXjBgModal ref="editZxXjBgModalRef" @save-success="getTabelData" />
  <EditYfBgModal ref="editYfBgModalRef" @save-success="getTabelData" />
  <ViewModal ref="viewModelRef" />
</template>

<script setup>
import BaseHead from "@/views/project/components/BaseHead.vue";
import CommonLabel from "@/views/project/components/CommonLabel.vue";
import ViewModal from "@/views/project/pages/xmbg/components/ViewModal.vue";
import EditZxXjBgModal from "@/views/project/pages/xmbg/components/EditModal.vue";
import EditYfBgModal from "@/views/project/yf/jzhtbg/components/EditModal.vue";
import ProjectInfo from "./ProjectInfo.vue";
import { cancelProcess } from "@/api/project/common";
import { getList, delRecords } from "@/api/project/zx/xmbg";
import useCommonFetch from "@/hooks/useCommonFetch";
import useDictFetch from "@/hooks/useDictFetch";
import { ElMessageBox, ElMessage } from "element-plus";
const emit = defineEmits(["operate-success"]);
const dialogVisible = ref(false);
const projectId = ref(null);
const projectClass = ref("");
const tableData = ref([]);
const changeTypeList = ref([]);
const checkStatusList = ref([]);
const viewModelRef = ref();
const editZxXjBgModalRef = ref();
const editYfBgModalRef = ref();
const cancelLoading = ref(false);
const cancelId = ref(null);
//查看
const view = (proId, proClass) => {
  projectId.value = proId;
  projectClass.value = proClass;
  dialogVisible.value = true;
};
defineExpose({ view });
const getTabelData = async () => {
  try {
    const params = {
      proId: projectId.value,
      pageNo: 1,
      pageSize: 1000,
    };
    const res = await getList(params);
    tableData.value = res.rows;
  } catch (error) {
    console.log(error);
  }
};
//点击查看
const handleView = (id) => {
  viewModelRef.value.view(id, projectClass.value);
};
//点击撤销
const handleCancel = (processId, cId) => {
  cancelId.value = cId;
  ElMessageBox.confirm("撤销后，该审批流程将自动结束，是否确认取消？", "提示", {
    type: "warning",
  }).then(async () => {
    try {
      cancelLoading.value = true;
      const res = await cancelProcess(processId);
      if (res.data) {
        ElMessage({
          message: "操作成功！",
          type: "success",
        });
        getTabelData();
        emit("operate-success");
      } else {
        ElMessage({
          message: "操作失败！",
          type: "error",
        });
      }
    } catch (error) {
      console.log(error);
    } finally {
      cancelLoading.value = false;
    }
  });
};
//点击编辑
const handleEdit = (id, projectId, taskId, isAuditor) => {
  if (projectClass.value == "yfContract") {
    editYfBgModalRef.value.edit(id, projectId, taskId, isAuditor);
  } else {
    editZxXjBgModalRef.value.edit(id, projectId, taskId, isAuditor);
  }
};
//点击删除
const handleDel = (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    type: "warning",
  }).then(async () => {
    try {
      const res = await delRecords(id);
      if (res.code == 200) {
        ElMessage({
          message: "删除成功！",
          type: "success",
        });
        getTabelData();
        emit("operate-success");
      }
    } catch (error) {
      console.log(error);
    }
  });
};
const handleOpen = () => {
  changeTypeList.value = useCommonFetch("变更类型");
  checkStatusList.value = useDictFetch("bpm_process_instance_status"); //审核状态
  getTabelData();
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
:deep(.el-dialog__body) {
  padding-bottom: 0;
}
</style>
